<template>
  <div ref="chart" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'hxZlFb',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        legend: {
          data: ['专利'],
          left: 'center',
          top: '10px',
        },
        tooltip: {
          confine: true,          // 强制提示框限制在图表区域内
          position: 'right',      // 优先右侧显示（根据实际情况调整）
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
          },
        },
        yAxis: {
          type: 'category',
          data: [
            '其他领域工程',
            '环境与生态工程',
            '绿色矿山工程',
            '新能源工程',
            '铁路（高铁）工程',
            '其他工程',
            '港口与航道工程',
            '建筑智能化',
            '轨道交通工程',
            '土木房屋建筑',
            '机电制造安装',
            '市政路桥工程',
            '水利水电工程',
          ],
          axisLabel: {
            interval: 0,
          },
        },
        grid: {
          top:40,
          right:20,
          bottom: 20,
          left: 110,
        },
        series: [
          {
            name: '专利',
            type: 'bar',
            data: [10, 200, 400, 600, 800, 1000, 1200, 80, 70, 60, 80, 400, 50],
            barWidth: '60%',
            color: '#9467bd ',
          },
        ],
      };

      chart.setOption(option);
    },
  },
};
</script>

<style scoped>
#chart {
  width: 100%;
  height: 270px;
}
</style>
